<template>
  <view class="content">
    <view class="app-title ac">
      <view class="fl" @click="back"
        ><image class="back" src="/static/img/back.png"></image></view
      >工单详情2
    </view>

    <view class="top-bg"></view>

    <view class="detail">
      <view class="item"
        >工单编号<view class="fr"
          ><b>{{ detail.woSn }}</b></view
        ></view
      >
      <view class="item"
        >工单类别<view class="fr"
          ><b>{{ detail.woCategory }}</b></view
        ></view
      >
      <view class="item"
        >发布时间<view class="fr"
          ><b>{{ detail.releaseTime }}</b></view
        ></view
      >
      <view class="item"
        >专业<view class="fr"
          ><b>{{ detail.major }}</b></view
        ></view
      >
      <view class="item"
        >线路<view class="fr"
          ><b>{{ detail.woLineName }}</b></view
        ></view
      >
      <view class="item"
        >所在地点<view class="fr"
          ><b>{{ detail.locationName }}</b></view
        ></view
      >
      <view class="item"
        >施工区域<view class="fr"
          ><b>{{ detail.constructArea }}</b></view
        ></view
      >
      <view class="item"
        >开始时间<view class="fr"
          ><b>{{ detail.startTime }}</b></view
        ></view
      >
      <view class="item"
        >结束时间<view class="fr"
          ><b>{{ detail.endTime }}</b></view
        ></view
      >
      <view class="item"
        >施工内容<view class="fr"
          ><b>{{ detail.constructContent }}</b></view
        ></view
      >
      <view class="item"
        >影响范围<view class="fr"
          ><b>{{ detail.influenceArea }}</b></view
        ></view
      >
      <view class="item"
        >机构<view class="fr"
          ><b>{{ detail.managementOrgName }}</b></view
        ></view
      >
      <view class="item"
        >工单负责人<view class="fr"
          ><b>{{ detail.woLeaderName }}</b></view
        ></view
      >
      <view class="item"
        >人数<view class="fr"
          ><b>{{ detail.personNumber }}</b></view
        ></view
      >
      <view class="item"
        >工单人员<view class="fr"
          ><b>{{ detail.constructPersonName }}</b></view
        ></view
      >
      <view class="item"
        >完成情况<view class="fr"
          ><b>{{ detail.completion }}</b></view
        ></view
      >
      <view class="item"
        >工单状态<view class="fr"
          ><b>{{ detail.woState }}</b></view
        ></view
      >

      <view
        class="work-detail-title"
        v-if="detailContent && detailContent.length > 0"
        ><b> 具体工作列表：</b></view
      >
      <u-table
        class="tables"
        v-if="detailContent && detailContent.length > 0"
        :th-style="thStyle"
        font-size="10"
      >
        <u-tr class="u-tr">
          <u-th class="u-th" width="90px">任务类型</u-th>
          <u-th class="u-th" width="90px">任务名称</u-th>
          <u-th class="u-th" width="90px">地点</u-th>
          <u-th class="u-th" width="90px">设备类型</u-th>
          <u-th class="u-th" width="90px">设备</u-th>
          <u-th class="u-th" width="190px">时长</u-th>
          <u-th class="u-th" width="90px">具体内容</u-th>
        </u-tr>
        <u-tr
          class="u-tr"
          v-for="(item, index) in detailContent"
          :key="item.detailedContent + index"
        >
          <u-td class="u-td" width="90px">{{ item.taskType }}</u-td>
          <u-td class="u-td" width="90px">{{ item.taskYearName }}</u-td>
          <u-td class="u-td" width="90px">{{ item.taskLocationName }}</u-td>
          <u-td class="u-td names" width="90px">{{ item.equTypeName }}</u-td>
          <u-td class="u-td names" width="90px">{{ item.equName }}</u-td>
          <u-td class="u-td" width="190px">{{
            item.startTime + "-" + item.endTime
          }}</u-td>
          <u-td class="u-td" width="90px">{{ item.detailedContent }}</u-td>
        </u-tr>
      </u-table>
      <view
        class="work-detail-title"
        v-if="detailTools && detailTools.length > 0"
        ><b>工具器列表：</b></view
      >
      <u-table v-if="detailTools && detailTools.length > 0">
        <u-tr class="u-tr">
          <u-th class="u-th">类型</u-th>
          <u-th class="u-th">名称</u-th>
          <u-th class="u-th">规格型号</u-th>
          <u-th class="u-th">单位</u-th>
          <u-th class="u-th">需求数量</u-th>
        </u-tr>
        <u-tr
          class="u-tr"
          v-for="(item, index) in detailTools"
          :key="item.name + index"
        >
          <u-td class="u-td">{{ item.type }}</u-td>
          <u-td class="u-td">{{ item.name }}</u-td>
          <u-td class="u-td">{{ item.specifications }}</u-td>
          <u-td class="u-td">{{ item.unit }}</u-td>
          <u-td class="u-td">{{ item.demandNumber }}</u-td>
        </u-tr>
      </u-table>
    </view>

    <!-- <Confirm
      v-show="show_work"
      :code="id"
      :id="detail.armCode"
      @closeFull="toggleFull"
    ></Confirm> -->
  </view>
</template>

<script>
// import Confirm from "../../components/public/confirm";
export default {
  // components: { Confirm },
  data() {
    return {
      thStyle: {
        width: "150px",
      },
      id: "",
      detail: {},
      detailContent: [],
      detailTools: [],
      show_work: false,
    };
  },
  onLoad(options) {
    this.id = options.id;
  },
  created() {
    this.initDetail();
  },
  methods: {
    back() {
      uni.navigateBack();
    },
    // toggleFull() {
    //   this.show_work = !this.show_work;
    // },
    initDetail() {
      this.fetch(
        "GET",
        this.baseUrl() + "/api/pms/work/getPmsWoinforAll",
        { woSn: this.id },
        true
      ).then((res) => {
        if (res.success) this.detail = res.data.PmsWoinfor;
        this.detailContent = res.data.PmsWoDetailed;
        this.detailTools = res.data.PmsWoTools;
      });
    },
  },
};
</script>

<style scoped>
.tables {
  overflow: auto;
  max-height: 140px;
}
.u-td {
  border: none !important;
}
.names {
  word-wrap: break-word;
  width: 90px;
  word-break: normal;
}
.u-tr {
  border-bottom: 1px solid rgb(228, 231, 237);
}
.detail {
  height: auto;
  min-height: 86vh;
}
.detail > .item {
  line-height: 51px;
  border-bottom: 1px solid #f1f1f1;
  padding-right: 16px;
}
.btn {
  position: absolute;
  width: 100%;
  bottom: 3%;
  left: 0;
}
.default-btn {
  width: 95%;
  display: block;
  margin: 0 auto;
}
.work-detail-title {
  margin-top: 20px;
  margin-bottom: 10px;
}
.detail > .photo {
  overflow-x: auto;
  width: 100%;
  height: 100px;
  white-space: nowrap;
}
.detail > .photo > .img-item {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  border-radius: 6px;
  display: inline-block;
}

.van-cell__value {
  text-align: right;
}
.van-cell {
  line-height: 32px;
}
</style>
